<template>
	<div class="table-wrapper">
		<div class="searchbar">
            <slot name="searchBar"></slot>
        </div>
		<el-table
			ref="elTable"
			style="width: 100%;"

			v-loading="isLoading"
			v-bind="$props"
			@selection-change="selectionChange"
			@sort-change="handleSortChange"
			@filter-change="handleFilterChange"
		>
			<slot></slot>
		</el-table>
		<el-col :span="24" class="toolbar pageagation">
			<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="[10, 50, 100, 200]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next"
					:total="total">
			</el-pagination>
		</el-col>
	</div>
</template>
<script>

	let params = {
		// pageNo  pageSize  column{order, prop}  filters: column-key selectedFilter
	};
	export default {
		props: {
			data: {
				type: Array,
				default: function _default() {
					return [];
				}
			},
			headerHeight:{
				type: Number,
				default: 0,
			},
			width: [String, Number],
			height: {
				type: [String, Number],
				// default: "aaa",
			},
			maxHeight: [String, Number],
			fit: {
				type: Boolean,
				default: true
			},
			stripe: Boolean,
			border: {
				type: Boolean,
				default: true,
			},
			rowKey: [String, Function],
			context: {},
			showHeader: {
				type: Boolean,
				default: true
			},
			rowClassName: [String, Function],
			rowStyle: [Object, Function],
			highlightCurrentRow: Boolean,
			currentRowKey: [String, Number],
			emptyText: String,
			expandRowKeys: Array,
			defaultExpandAll: Boolean,
			defaultSort: Object,

			total: Number,

			isLoading: {
				default: false,
				type: Boolean
			},
		},
		data() {
			return {
				currentPage: 1,
				pageSize: 10,
				$props: this.$props,
				loading: this.$props.loading,
			}
		},
		methods: {
			resetPagination(pageNo, pageSize){
				this.currentPage = pageNo || this.currentPage;
				this.pageSize = pageSize || this.pageSize;
			},
			handleCurrentChange(currentPage) {
				params.pageNo = currentPage;
				this.currentPage = currentPage;
				this.$emit('action-change', params);
			},
			handleSizeChange(size) {
				params.pageSize = size;
				params.pageNo = 1;
				this.pageSize = size;
				this.currentPage = 1;
				this.$emit('action-change', params);
			},
			handleSortChange(column) {
				params.column = {
					order: column.order,
					prop: column.prop
				};
				this.$emit('action-change', params);
			},
			handleFilterChange(filters) {
				params.filters = filters;
				this.$emit('action-change', params);
			},
			selectionChange(sels) {
				this.$emit('selection-change', sels);
			}
		},
		mounted() {
			params = {};
		},
		watch:{

		}
	}
</script>
<style scoped>
	.searchbar {
		background-color: #ffffff;
	    margin: 0 0 15px 0;
	    padding: 15px;
	    overflow: hidden;
	}
	.toolbar {
		padding: 5px;
		margin-top: 0;
		background-color: #ffffff;
		border: none;
	}
</style>
